<template>
	<view class="DetailsBox" :style="{'--color':color}">
		<status-bar title='详情' hideBg="1" :back="back"></status-bar>
		
		<view class="Onfo">
			<image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Img"></image>
			<view class="TxtOnfo">
				<text class="black size30">{{site_time.name}}</text>
				<text class="Time">购买时间：{{info.add_time}}</text>
				<text class="Time">开宴时间：{{site_time.open_date_time}}</text>
			</view>
			<text class="Waiting stateTXT a-self-start" v-if="info.state == 1">待使用</text>
			<text class="color_ff4 stateTXT a-self-start" v-if="info.state == 3 && info.tail_price != 0">待付尾款</text>
			<text class="color_ff4 stateTXT a-self-start" v-if="info.state == 3 && info.tail_price == 0">待核销</text>
			<text class="used stateTXT a-self-start" v-if="info.state == 2">已使用</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 4">已过期</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 5">已退款</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 6">退款中</text>
		</view>
		
		
		<view class="content">
			<view class="black size30">预约信息</view>
			<view class="List">
				<text class="title">预约单号</text>
				<text class="title">{{info.scan_order_code}}</text>
			</view>
			<view class="List">
				<text class="title">预约日期</text>
				<text class="title">{{info.add_time}}</text>
			</view>
			<view class="List">
				<text class="title">联系人</text>
				<text class="title">{{info.user_name}}</text>
			</view>
			<view class="List">
				<text class="title">联系电话</text>
				<text class="title">{{info.user_tel}}</text>
			</view>
			<view class="row j-sb a-center m-top40">
				<view class="contact" @click="$common.Tel(pageData.service_tel)">
					<view class="iconfont icon-kefu color_99 size60"></view>
					<view class="d-flex f-column CallInfo">
						<text class="CallInfo">客服热线</text>
						<text class="CallInfo">{{pageData.service_tel}}</text>
					</view>
				</view>
				<view class="contact" @click="Refund = true">
					<view class="iconfont icon-shouye color_99 size60"></view>
					<view class="d-flex f-column CallInfo">
						<text class="CallInfo">全额退款</text>
						<text class="CallInfo">开宴前{{site_time.cancel_hour}}小时</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="banquet">
			<view class="black size30 p-left20">座席信息</view>
			<view class="banList bot" v-for="(item,index) in info.sites_detail" :key="index">
				<view class="Bnakine">{{item.type_name}}-{{item.name}}</view>
				<view class="bnaid">
					<text class="title">{{item.goods.name}}</text>
					<text class="title" v-if="info.state != 3">￥{{item.site_price}}</text>
					<text class="title" v-else>定金：￥{{item.order_price}}</text>
				</view>
				<view class="bnaid" v-if="item.make_up_price">
					<view class="d-flex a-center">
						<text class="title">妆造预约</text>
						<text class="title m-left20">{{item.make_up_date_str}}</text>
					</view>
					<text class="title">￥{{item.make_up_price}}</text>
				</view>
			</view>


		</view>
		
		
		<view class="favorable" v-if="info.num > 0">
			<view class="black size30 p-left20">优惠抵扣</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">美团劵</text>
					<text class="title">X{{info.num}}</text>
				</view>
				
			</view>
		</view>
		
		
		
		
		<view class="PriceInfo">
			<view class="black size30 p-left20">支付信息</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">定金</text>
					<text class="title">￥{{info.order_price}}</text>
				</view>
				<view class="bnaid" v-if="info.state != 3">
					<text class="title">妆造价格</text>
					<text class="title">￥{{info.make_up_price}}</text>
				</view>
				<view class="bnaid" v-if="info.tail_price > 0">
					<text class="title">{{Copewith}}尾款</text>
					<text class="title">￥{{info.tail_price}}</text>
				</view>
				<view class="bnaid" v-if="info.state != 3">
					<text class="title">支付价格</text>
					<text class="title">￥{{info.payment}}</text>
				</view>
				<view class="bnaid" v-if="info.need_refuse_money && info.need_refuse_money > 0">
					<text class="color_ff2 size26">应退定金</text>
					<text class="color_ff2 size26">￥{{info.need_refuse_money}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="row j-centert m-top50" v-if="info.state == 1 || info.state == 3">
			<view class="botBtn flexac f-column" v-if="info.state == 3 && info.tail_price != 0" @click="finalPayment">
				<text class="h6">￥{{info.tail_price}}</text>
				<view class="h6">支付尾款</view>
			</view>
			<view class="botBtn flexac size30" @click="show = true">核销码</view>
		</view>
		
		
		
		<u-popup :show="show" @close="show = false" mode="center" round="5" :duration="200" :safeAreaInsetBottom="false">
				<view class="Upopup">
					<text class="Utitle">莅临现场并出示给工作人员</text>
					<image :src="$imgUrls(info.qr_code)" class="Ucode"></image>
					<text class="Uorder">{{info.scan_order_code}}</text>
					<block v-if="info.state == 3 && info.tail_price != 0">
						<text class="color_ff4 size30 m-top20">需要支付尾款 ￥{{info.tail_price}}</text>
						<view class="Ubtn" @click.stop="finalPayment">立即支付</view>
					</block>
				</view>
		</u-popup>
		
		
		
		<u-popup :show="Refund" @close="Refund = false" mode="bottom" round="10" closeable :duration="200">
		            <view class="RefundBox">
		                <view class="row j-centert black size30">全额退款说明</view>
						<view class="rows m-top30">
							<u-parse :content="pageData.refuse_desc" :domain="imgUrl"></u-parse>
						</view>
						
						<view class="row j-sb p-left30 p-right30 m-top50" 
						     v-if="info.state == 1 || info.state == 3">
							<view class="botBtn flexac size30" @click="refuseOrder">确定退款</view>
							<view class="botBtn Cancel flexac size30" @click.stop="Refund = false">取消</view>
						</view>
		            </view>
	    </u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color:'#d7b06d',
				show:false,
				Refund:false, 
				order_id:'',
				pageData:'',
				info:'',
				site_time:'',
				downTime:null,
			}
		},
		onLoad(opt) {
			if(opt.id) this.order_id = opt.id;
			this.getLockOrder();
		},
		onShow() {
			// #ifdef MP-WEIXIN
			let that = this;
			let options = wx.getEnterOptionsSync();
			if(options.scene == '1038' && options.referrerInfo.appId=='wxef277996acc166c3'){
				let extraData = options.referrerInfo.extraData;
				if(!extraData) return;
				if(extraData.code == 'success'){
					that.getLockOrder();
				}
			}
			// #endif
			this.Refresh();
		},
		
		methods: {
			getLockOrder(){
				this.$http.get({
					url:'/SiteApi/getLockOrder',
					data:{
						order_id:this.order_id
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg,2);
					const Result = res.data;
					this.pageData = Result;
					this.info = Result.info;
					this.site_time = Result.site_time;
				})
			},
			finalPayment(){
				let that = this;
				this.$showLoading('');
				this.$http.get({
					url:'/SiteApi/getTailPayInfo',
					data:{
						order_id:this.order_id
					}
				}).then(res=>{
					this.$hideLoading();
					if(res.code != '100') return this.$Toast(res.msg);
					const Result = res.data;
					// #ifdef MP-WEIXIN
					if(Result.extraData){
						wx.openEmbeddedMiniProgram({
							appId:Result.appId,
							extraData:Result.extraData
						 });
						 return; 
					}
					uni.getProvider({
						service: 'oauth',
						success: function (resp) {
							console.log(resp.provider)
							if (resp.provider) {
								uni.requestPayment({
									provider:resp.provider[0],
									orderInfo: Result,
									timeStamp: Result.timeStamp,
									nonceStr: Result.nonceStr,
									package: Result.package,
									signType: Result.signType,
									paySign: Result.paySign,
									success:function (resj) {
										that.getLockOrder();
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
									}
								})
							}
						}
					})
					// #endif
				})
			},
			refuseOrder(){
				this.Refund = false;
				this.$showLoading('');
				this.$http.post({
					url:'/SiteApi/refuseOrder',
					data:{
						id:this.order_id
					}
				}).then(res=>{
					this.$hideLoading();
					if(res.code != 200) return this.$Toast(res.msg);
					this.$Toast(res.msg);
					this.getLockOrder();
				})
			},
			CloseTime(){
				clearInterval(this.downTime);
				this.downTime = null;
			},
			Refresh(){
				this.downTime = setInterval(()=>{
					this.getLockOrder();
				},6000)
			},
		},
		computed:{
			Copewith(){
				return this.info.state == 3?'应付':''
			},
		},
		onHide() {
			this.CloseTime();
			
		},
		onUnload() {
			this.CloseTime();
		},
	}
</script>

<style>
	page{
		 background-color: #f5ecda;
		 padding-bottom: 40rpx;
	}
</style>
<style lang="scss" scoped>
	
	.DetailsBox{
		width: 100%;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.Onfo{
		width:690rpx;
		margin:0 auto;
		display: flex;
		align-items: center;
		padding-top:20rpx;
	}
	.Img{
		width:120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.TxtOnfo{
		flex:1;
		display: flex;
		flex-direction: column;
	}
	.Time{
		color:#999;
		font-size:22rpx;
		margin-top:8rpx;
	}
	.stateTXT{
		font-size:28rpx;
		margin-left:20rpx;
	}
	.Waiting{
		color:#009933;
	}
	.used{
		color: #333;
	}
	.expiredbg{
		color: #bcbcbc;
	}
	.content{
		width:690rpx;
		margin:24rpx auto 0;
		background-color: #ffffff;
		padding:20rpx;
		border-radius: 10rpx;
	}
	.List{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top:24rpx;
	}
	.title{
		color:#333;
		font-size:26rpx;
	}
	.contact{
		display: flex;
		align-items: center;
	}
	.CallInfo{
		color:#333;
		font-size:24rpx;
		margin-left:10rpx;
	}
	.banquet{
		width:690rpx;
		margin:24rpx auto 0;
		background-color: #ffffff;
		padding:20rpx 0;
		border-radius: 10rpx;
	}
	.banList{
		width:100%;
		padding:24rpx 20rpx 24rpx 20rpx;
	}
	.PriceList{
		width:100%;
		padding:10rpx 20rpx;
	}
	.Bnakine{
		padding:4rpx 14rpx;
		background-color: #fff2de;
		border-radius: 8rpx;
		font-size:24rpx;
		border:1rpx solid var(--color);
		color:var(--color);
		display: inline-block;
	}
	.bnaid{
		width:100%;
		display: flex;
		justify-content: space-between;
		padding:0 20rpx;
		margin-top:20rpx;
	}
	.PriceInfo{
		width:690rpx;
		width:690rpx;
		margin:24rpx auto 0;
		background-color: #ffffff;
		padding:20rpx 0;
		border-radius: 10rpx;
	}
	.botBtn{
		width:240rpx;
		height: 76rpx;
		background-color: #d7b06d;
		border-radius: 8rpx;
		color:#fff;
		margin:0 20rpx;
	}
	// .Cancel{
	// 	background-color: #f5ecda !important;
	// 	color:#999;
	// }
	.Upopup{
		width:580rpx;
		padding:30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.Utitle{
		color:#000;
		font-size:30rpx;
	}
	.Ucode{
		width:480rpx;
		height: 480rpx;
		margin-top:20rpx;
	}
	.Uorder{
		color:#000;
		font-size:28rpx;
		margin-top:20rpx;
	}
	.Ubtn{
		width:240rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#fff;
		font-size:28rpx;
		border-radius: 8rpx;
		background-color: #d7b06d;
		margin-top:20rpx;
	}
	.RefundBox{
		width:100%;
		padding:50rpx 30rpx 50rpx 30rpx;
		display: flex;
		flex-direction: column;
	}
	.favorable{
		width:690rpx;
		margin:24rpx auto 0;
		background-color: #ffffff;
		padding:20rpx 0;
		border-radius: 10rpx;
	}
</style>
